<template>
  <div class="time-select">
    <div 
      v-for="item in timeOptions" 
      :key="item.value"
      :class="['time-item', { 'active': activeTab === item.value }]"
      @click="handleTabClick(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'TimeSelect',
  data() {
    return {
      activeTab: 'month', // 默认选中"今日"
      timeOptions: [
        { label: '今日', value: 'today' },
        { label: '本月', value: 'month' },
        { label: '本年度', value: 'year' }
      ]
    }
  },
  methods: {
    // 格式化时间为 YYYY-MM-DD HH:mm:ss
    formatDateTime(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    handleTabClick(value) {
      this.activeTab = value
      // 触发事件，将时间类型传递给父组件
      this.$emit('time-change', value);

      console.log('value', value);
    },
    // 获取当前选中的时间范围
    getTimeRange() {
      const now = new Date()
      let startTime, endTime

      switch (this.activeTab) {
        case 'today':
          // 今日：从今天00:00:00到现在
          startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
          endTime = now
          break
        case 'month':
          // 本月：从本月1号00:00:00到现在
          startTime = new Date(now.getFullYear(), now.getMonth(), 1, 0, 0, 0)
          endTime = now
          break
        case 'year':
          // 本年度：从今年1月1号00:00:00到现在
          startTime = new Date(now.getFullYear(), 0, 1, 0, 0, 0)
          endTime = now
          break
        default:
          startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
          endTime = now
      }

      return {
        startTime: this.formatDateTime(startTime),
        endTime: this.formatDateTime(endTime),
        type: this.activeTab
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.time-select {
  display: inline-flex;
  gap: 6px;
  align-items: center;

  .time-item {
    width: auto;
    padding: 0 12px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    will-change: transform, background-color, border-color, box-shadow;
    transition: 
      color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transform: translateY(0) scale(1);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
    }

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(64, 158, 255, 0.1);
      transform: translate(-50%, -50%);
      transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 0;
    }

    &:hover {
      color: #409EFF;
      border-color: #409EFF;
      box-shadow: 0 3px 8px rgba(64, 158, 255, 0.25);
      transform: translateY(-1px) scale(1.01);

      &::before {
        left: 100%;
      }

      &::after {
        width: 100px;
        height: 100px;
      }
    }

    &.active {
      color: #fff;
      background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
      border-color: #409EFF;
      box-shadow: 0 3px 12px rgba(64, 158, 255, 0.35);
      font-weight: 600;
      transform: translateY(0) scale(1);
      animation: activePulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
  }
}

@keyframes activePulse {
  0% {
    transform: scale(0.92) translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.05) translateY(-2px);
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
</style>

